<script setup>
/*
计算属性：
   使用场景：依赖一个或者多个值（响应式数据）产生一个新的值
   特点：缓存效果，依赖的值变化 了，产生的新值会立马变化、
   使用：
      
      1：导入  import {computed} from 'vue'
      2:定义
         const newVal=computed(()=>{
           return 新的值
         })
         const newVal=computed({
           get(){
             return 新的值
           },
           set(value){
             value给newVal赋予的新值
           }
         })
      3：newVal在js中使用  newVal.value====新的值
         newVal在html中使用  {{newVal}}


*/
import { computed, ref } from 'vue'
const age = ref(10)
const newAge = computed(() => {
  console.log(1)
  return age.value - 1
})
const prevAge = computed({
  get () {
    return age.value - 2
  },
  set (value) {
    console.log(value)
    age.value = +value + 2
  }
})
</script>
<template>
  <div>
    <div>张三年龄: <input type="text" v-model="age" /></div>
    <div>张三去年是多少岁:{{ newAge }}</div>
    <div>张三去年是多少岁:{{ newAge }}</div>
    <div>张三去年是多少岁:{{ newAge }}</div>
    <div>张三去年是多少岁:{{ newAge }}</div>
    <div>张三前年的岁数: <input type="text" v-model="prevAge" /></div>
  </div>
</template>
<style></style>
